<template>
	<view class="container">
		<view class="login-head-box">
			<text class="title">注册账户</text>
		</view>
		<view class="login-head-tab">
			<text @click="regMethod=0" class="text-box line" :class="{active:regMethod===0}">用户名注册</text>
			<text @click="regMethod=1" class="text-box line" :class="{active:regMethod===1}">手机注册</text>
			<text @click="regMethod=2" class="text-box" :class="{active:regMethod===2}">邮箱注册</text>
		</view>
		<view class="login-form-list">
			<!--用户名注册.开始-->
			<block v-if="regMethod===0">
				<view class="item-box">
					<input v-model="userModel.userName" type="text" placeholder="请输入用户名" class="input" />
				</view>
				<view class="item-box">
					<view class="left">
						<input type="text" v-model="userModel.codeValue" placeholder="请输入验证码" class="input" />
					</view>
					<view @click="initCode" class="code">
						<image mode="widthFix" :src="srcData"></image>
					</view>
				</view>
				<view class="item-box">
					<input v-model="userModel.password" password placeholder="请输入密码" class="input" />
				</view>
			</block>
			<!--用户名注册.结束-->
			
			<!--手机注册.开始-->
			<block v-if="regMethod===1">
				<view class="item-box">
					<input v-model="phoneModel.phone" type="text" placeholder="请输入手机号码" class="input" />
				</view>
				<view class="item-box">
					<view class="left">
						<input v-model="phoneModel.codeValue" type="text" placeholder="请输入验证码" class="input" />
					</view>
					<view class="right">
						<text v-if="timer>0" class="send gray">重新获取({{timer}}s)</text>
						<text v-else @click="sendPhoneCode" class="send">获取验证码</text>
					</view>
				</view>
				<view class="item-box">
					<input v-model="phoneModel.password" password placeholder="请输入密码" class="input" />
				</view>
			</block>
			<!--手机注册.结束-->
			
			<!--邮箱注册.开始-->
			<block v-if="regMethod===2">
				<view class="item-box">
					<input v-model="emailModel.email" type="text" placeholder="请输入邮箱账户" class="input" />
				</view>
				<view class="item-box">
					<view class="left">
						<input v-model="emailModel.codeValue" type="text" placeholder="请输入验证码" class="input" />
					</view>
					<view class="right">
						<text v-if="timer>0" class="send gray">重新获取({{timer}}s)</text>
						<text v-else @click="sendEmailCode" class="send">获取验证码</text>
					</view>
				</view>
				<view class="item-box">
					<input v-model="emailModel.password" password placeholder="请输入密码" class="input" />
				</view>
			</block>
			<!--邮箱注册.结束-->
			<view class="agree-box">
				<label @click="agree?agree=false:agree=true">
					<checkbox :checked="agree" color="#FFCC33" style="transform:scale(0.8)" />已阅读并同意
				</label>
				<text class="link">《隐私策略》</text>
			</view>
			<view class="btn-box">
				<button @click="submitForm" class="btn submit">确认注册</button>
			</view>
		</view>
		<view class="login-foot-box">
			已有账号？<navigator url="login" class="link">马上登录</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: 0, //计时器
				agree: false, //同意协议
				regMethod: 0, //注册方式0用户名密码1手机2邮箱
				srcData: null, //验证码路径
				//用户名注册
				userModel:{
					method: 0,
					userName: null,
					password: null,
					codeKey: null,
					codeValue: null,
				},
				//手机注册
				phoneModel: {
					method: 1,
					phone: null,
					password: null,
					codeKey: null,
					codeValue: null,
				},
				//邮箱注册
				emailModel:{
					method: 2,
					email: null,
					password: null,
					codeKey: null,
					codeValue: null,
				},
			}
		},
		methods: {
			//获取图形验证码
			initCode() {
				let _this = this;
				_this.$api.request({
					url: "/verifycode",
				}).then((res) => {
					_this.userModel.codeKey = res.data.key
					_this.srcData = res.data.data
				})
			},
			//发送手机验证码
			sendPhoneCode(){
				let _this = this;
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(_this.phoneModel.phone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				//发送短信
				_this.$api.request({
					url: `/verifycode/mobile/${_this.phoneModel.phone}?check=0`,
					loading: true,
				}).then((res) => {
					_this.timer = 120; //设置120秒
					_this.countDown();//开始倒计时
					_this.phoneModel.codeKey = res.data.codeKey;
				})
			},
			//发送邮件验证码
			sendEmailCode(){
				let _this = this;
				if(!/(^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$)/.test(_this.emailModel.email)){
					this.$api.msg('请输入正确的邮箱账户');
					return;
				}
				//发送邮件
				_this.$api.request({
					url: `/verifycode/email/${_this.emailModel.email}?check=0`,
					loading: true,
				}).then((res) => {
					_this.timer = 120; //设置120秒
					_this.countDown();//开始倒计时
					_this.emailModel.codeKey = res.data.codeKey;
				})
			},
			//计时器
			countDown(){
				let _this = this;
				if(_this.timer>0){
					_this.timer--;
					setTimeout(function() {
						_this.countDown();
					},1000)
				}
			},
			//提交表单
			submitForm(){
				let _this = this;
				if(!_this.agree){
					_this.$api.msg('请先阅读并同意协议');
					return;
				}
				if(_this.regMethod===1){
					let model = _this.phoneModel;
					if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(model.phone)){
						_this.$api.msg('请输入正确的手机号码');
						return;
					}
					if(!model.codeKey){
						_this.$api.msg('请先获取手机验证码');
						return;
					}
					if(!model.codeValue){
						_this.$api.msg('请输入手机验证码');
						return;
					}
					if(!/(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$)/.test(model.password)){
						_this.$api.msg('密码要含字母数字且大于6位');
						return;
					}
					_this.submitData(model);
					
				}else if(_this.regMethod===2){
					let model = _this.emailModel;
					if(!/(^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$)/.test(model.email)){
						_this.$api.msg('请输入正确的邮箱账户');
						return;
					}
					if(!model.codeKey){
						_this.$api.msg('请先获取邮箱验证码');
						return;
					}
					if(!model.codeValue){
						_this.$api.msg('请输入邮箱验证码');
						return;
					}
					if(!/(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$)/.test(model.password)){
						_this.$api.msg('密码要含字母数字且大于6位');
						return;
					}
					_this.submitData(model);
				}else{
					let model = _this.userModel;
					if(!model.userName){
						_this.$api.msg('请输入用户名');
						return;
					}
					if(!model.password){
						_this.$api.msg('请输入登录密码');
						return;
					}
					if(!/(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$)/.test(model.password)){
						_this.$api.msg('密码要含字母数字且大于6位');
						return;
					}
					_this.submitData(model);
				}
			},
			//请求API接口
			submitData(model){
				let _this = this;
				_this.$set(model, 'siteId', _this.$site);
				_this.$api.request({
					url: `/account/member/register`,
					method: "POST",
					load: true,
					data: model
				}).then((res) => {
					uni.showModal({
					    title: '注册成功',
					    content: '是否马上登录会员账户？',
						cancelText: '回首页',
						confirmText: '去登录',
					    success: function (res) {
							if (res.confirm) {
								//跳转登录页
								uni.navigateTo({
									url: 'login',
								});
					        } else if (res.cancel) {
								//跳转首页
								uni.switchTab({
									url: '../goods/index',
								});
					        }
					    }
					})
					
				});
			}
		},
		onLoad(){
			this.initCode();
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
</style>
